<template>
    <el-dialog :title="this.$root.lang.userinfo.buyLog.title" :visible.sync="showDialog" @close="closeDialog" width="50%"  :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form @submit.native.prevent :model="form" ref="form" :rules="rules" size="small" label-position="right" label-width="110px">
        <el-form-item :label="$root.lang.userinfo.buyLog.months" prop="months">
          <el-input type="number" v-model="form.months" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>10元/月
        </el-form-item>
        <el-form-item>
          <el-button class="dialog-btn" @click="onSubmit()" :loading="loading" type="primary" >{{ this.$root.lang.userinfo.buyLog.confirm }}</el-button>
        </el-form-item>
        <div class="order">
          <a href="javascript:void(0);" @click="toOrder()">{{ this.$root.lang.userinfo.buyLog.order.title }}</a>
          <a href="javascript:void(0);" @click="toInvoice()">{{ this.$root.lang.userinfo.buyLog.invoice.title }}</a>
        </div>
      </el-form>
    </el-dialog>
</template>

<script>
import '@/options/baseState'

export default {
  name: 'BuyLog',
  data() {
    return {
    	loading: false,
    	showDialog: this.show,
    	form: {
    		months: 1,
    	},
    	rules: {
        months: [{ required: true, message: this.$root.lang.userinfo.buyLog.rule.months, trigger: 'blur' }],
      },
      baseState: baseState,
    }
  },
  watch: {
    show: function (value) {
      if(this.$refs['form']) this.$refs['form'].resetFields()
      this.showDialog = value
  	},
  },
  props: {
  	show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
  	closeDialog() {
      this.$emit('editReceive',{
        key: 'showBuyLog',
        value: this.showDialog
      })
    },
    onSubmit() {
    	this.$refs['form'].validate((valid) => {
        if(valid) {
        	this.editInfo()
        }else{
          return false
        }
      })
    },
  	editInfo () {   
      // this.showDialog = false
      // this.$emit('reload', {qrCodeUrl: 'weixin://wxpay/bizpayurl?pr=DD6cRhrzz', orderNo: 'g4Xt5L2MEjtVT0uXnK9YAC2wOLRMAMs8'})   
      this.loading = true
      this.request({
        url: '/daliy/order/payment?months=' + this.form.months,
        method: 'get',
      }).then(response => {
        this.loading = false
        this.showDialog = false
        this.$emit('reload', {qrCodeUrl: response.result.qrCodeUrl, orderNo: response.result.orderNo} )
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    toOrder() {
      this.$router.push({ name:'Order' })
    },
    toInvoice() {
      this.$router.push({ name:'Invoice' })
    }
  },
  created() {
    

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/css/style.scss';
.moneyReal {
  font-size: 18px;
  margin-right: 15px;
  color: red;
}
.moneyShow {
  text-decoration: line-through
}
.order {
  text-align: center;
  a {
    color: $color-blue;
	  text-decoration: none;
  }
}
</style>